<!-- 以后项目的根组件 -->
<template>
	<div>
		<!--顶部固定栏  -->
		<mt-header title="黑马程序员 vue.js项目"></mt-header>
	
		<!--返回键部分  -->
		<div v-show="isShow" class="back">
			<a href="javascript:;" @click="backTo">返回</a>
		</div>
	
		<!--中间组件部分  用vue-router的router-view占位  -->
		<router-view></router-view>
	
		<!--底部固定导航栏  -->
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/Home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar/shopcar">
				<span class="mui-icon mui-icon-contact">
					<span class="mui-badge" id="shopcarCount">0</span>
				</span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</router-link>
		</nav>
	</div>
</template>

<script>
// 按需导入


//引入获取数据的js文件
import { getItem, setItem, delItem, updateData } from './localSg.js'

// 负责导出 .vue这个组件对象(它本质上是一个Vue对象,所以Vue中该定义的元素都可以使用)
export default {  // es6的导出对象的写法
	data() {  //等价于 es5的 data:function(){
		return {
			isShow: false
		}
	},
	mounted() {
		var arr = getItem(),
			sum = 0;

		arr.forEach((v) => {
			sum += v.goodsCount
		});
		document.getElementById("shopcarCount").innerText = sum;
	},

	//监视路由对象  如果是Home组件的话就让返回按钮隐藏
	watch: {
		'$route': function (newroute, oldroute) {
			this.isShow = newroute.path == "/Home" ? false : true;
		}
	},
	methods: {
		backTo() {
			this.$router.go(-1);
		}
	}
}
</script>

<style scoped>
.back {
	width: 60px;
	position: absolute;
	top: 10px;
	left: 10px;
}

.back a{
	font: 800 15px/20px "Microsoft Yahei";
	color: #fff;
}
</style>